<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main>
				<div class="top">
					<h3>商品品牌</h3>
					<!-- <el-button type="primary">添加商品标签</el-button> -->
					<el-button plain type="primary" v-if="counter.btnsObj.addFlag" @click="add">{{counter.btnsObj.addName}}</el-button>
				</div>
				<el-form-item label="品牌名称" label-width="90">
				  <el-input v-model="form.logoName" placeholder="请输入品牌名称" />
				  <el-button type="primary" @click="search" style="margin-left: 10px;">搜索</el-button>
				  <el-button @click="reset">重置</el-button>
				</el-form-item>
				<el-table :data="tableData" style="width: 100%" height="55vh">
				    <el-table-column prop="logoName" label="品牌名称" width="200" />
				    <el-table-column label="品牌logo" width="150">
						<template #default = "image">
							<img :src="downloadUrl+image.row.logoImage" style=" width: 100px;height: 100px;object-fit: cover; ">
						</template>
					</el-table-column>
				    <el-table-column prop="delFlag" label="排序" />
					<el-table-column label="操作">
						<template #default="record">
							<a class="mya" @click="modify(record.row)" style="cursor: pointer;">编辑</a>
							<a class="mya" @click="del(record.row)" style="cursor: pointer;">删除</a>
						</template>
						
					</el-table-column>
				  </el-table>
				  
				  <el-pagination
				  	layout="prev,pager,next"
				  	:page-count="total"
				  	:page-size="pageSize"
				  	v-model:current-page="pageIndex"	
				  	@current-change="changePage"
				  ></el-pagination>
			</el-main>
	    </el-container>
	</div>
	
	
	<!-- 编辑框 -->
	<el-dialog v-model="dialogFormVisible" title="编辑商品品牌" width="500">
	    <el-form :model="formdata" label-width="auto">
	      <el-form-item label="品牌名称" label-width="130">
	        <el-input v-model="formdata.logoName" autocomplete="off" style="width: 240px;" />
	      </el-form-item>
		  <el-form-item label="品牌logo" label-width="130">
			   <el-upload
				 class="avatar-uploader"
				 :action="uploadUrl"
				 :show-file-list="false"
				 :on-success="handleAvatarSuccess1"
				 :before-upload="beforeAvatarUpload"
				>
				  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
				  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
		  </el-form-item>
	      <el-form-item label="品牌介绍" label-width="130">
				 <el-input
				    v-model="formdata.logoIntroduce"
				    style="width: 240px"
				    :rows="2"
				    type="textarea"
				    placeholder="请输入品牌介绍"
				  />
	      </el-form-item>
		  
		  <el-form-item label="排序" label-width="130">
			  <el-input
			      v-model="formdata.delflag"
			      style="width: 240px"
			      maxlength="6"
			      placeholder="0"
			      show-word-limit
			      type="text"
			    />
		  </el-form-item>
	    </el-form>
	    <template #footer>
	      <div class="dialog-footer">
	        <el-button @click="cancel">取消</el-button>
	        <el-button type="primary" @click="serve">
	          确定
	        </el-button>
	      </div>
	    </template>
	  </el-dialog>
	  
	  
	  
	  <!-- 确认删除框 -->
	   <el-dialog
	      v-model="dialogVisible1"
	      title="提示"
	      width="500"
	    >
	      <span>确定要删除该数据吗</span>
	      <template #footer>
	        <div class="dialog-footer">
	          <el-button @click="dialogVisible1=false">取消</el-button>
	          <el-button type="primary" @click="define">
	            确定
	          </el-button>
	        </div>
	      </template>
	    </el-dialog>
		
		
		<!-- 添加框 -->
		<el-dialog v-model="dialogFormVisible2" title="添加商品品牌" width="500">
		    <el-form :model="formdataa" label-width="auto" ref="ruleFormRef" :rules="rules">
		      <el-form-item label="品牌名称" prop="logoName" label-width="130">
		        <el-input v-model="formdataa.logoName" autocomplete="off" style="width: 240px;"  />
		      </el-form-item>
			  <el-form-item label="品牌logo" prop="logoImage" label-width="130">
				   <el-upload
					 v-model="formdataa.logoImage"
					  class="avatar-uploader"
					  :action="uploadUrl"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess2"
					  :before-upload="beforeAvatarUpload"
					>
					  <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
					  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
					</el-upload>
			  </el-form-item>
		      <el-form-item label="品牌介绍" prop="logoIntroduce" label-width="130">
					 <el-input
					    v-model="formdataa.logoIntroduce"
					    style="width: 240px"
					    :rows="2"
					    type="textarea"
					    placeholder="请输入品牌介绍"
					  />
		      </el-form-item>
			  
			  <el-form-item label="排序" label-width="130">
				  <el-input
				      v-model="formdataa.delflag"
				      style="width: 240px"
				      maxlength="6"
				      placeholder="0"
				      show-word-limit
				      type="text"
				    />
			  </el-form-item>
		    </el-form>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button @click="dialogFormVisible2=false">取消</el-button>
		        <el-button type="primary" @click="sure(formdataa,ruleFormRef)">
		          确定
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
</template>

<script setup>
	import {reactive,ref,onMounted} from 'vue';
	import { useRouter,useRoute } from 'vue-router';
	import {useCounterStore} from "../stores/counter"
	import Header from "@/components/Header.vue"
	import { Plus } from '@element-plus/icons-vue'
	import { uploadUrl,baseUrl,downloadUrl } from "@/utils/request";
	import {BrandList,InsertBrandList,UpdateBrandList,DelBrandList} from "@/api"
	import { ElMessage } from 'element-plus'
	
	let dialogFormVisible = ref(false)
	let dialogVisible1 = ref(false)
	let dialogFormVisible2 = ref(false)
	let route = useRoute();
	let router = useRouter();
	let counter = useCounterStore();
	counter.btns = route.meta.btns
	//图片上传
	const imageUrl = ref('')
	const imageUrl2 = ref('')
	const handleAvatarSuccess1= (response,uploadFile) => {
		// console.log('上传成功',response)
	  imageUrl.value = URL.createObjectURL(uploadFile.raw)
	  //imageUrl.value=baseUrl+"manager/"+response.data
	  formdata.logoImage=response.data
	}
	const handleAvatarSuccess2= (response,uploadFile) => {
		// console.log('上传成功',response)
	  imageUrl2.value = URL.createObjectURL(uploadFile.raw)
	  //imageUrl.value=baseUrl+"manager/"+response.data
	  formdataa.logoImage=response.data
	}
	const beforeAvatarUpload= (rawFile) => {
		// console.log(rawFile)
		let reg=/(jpeg|png|jpeg)$/
	  if (!reg.test(rawFile.type)) {
	    ElMessage.error('图片只能是jpg/jpeg/png格式的')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 4) {
	    ElMessage.error('图片的大小不能超过4MB')
	    return false
	  }
	  return true
	}
	//获取标签列表
	let tableData = ref([])
	let pageIndex=ref(1);
	let pageSize=4;
	let total=ref(0)
	const MakeList=async ()=>{
		let res=await BrandList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		//console.log("品牌列表",res)
		tableData.value=res.logoList
		total.value=res.pageCount
	}
	let form = reactive({
		logoName:""
	})
	//搜索品牌
	const search = async ()=>{
		let res1=await BrandList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			logoName:form.logoName,
			siteId:1
		})
		tableData.value=res1.logoList
		//console.log("sousio品牌",res1)
	}
	//重置
	const reset = ()=>{
		form.logoName=""
		MakeList()
	}
	
	//点击分页器
	const changePage=(page)=>{
		// console.log(page)
		pageIndex.value=page;
		MakeList()
	}
	let formdata = reactive({
	  logoName: '',
	  logoIntroduce: "",
	  delflag:"",
	  logoImage:"",
	  siteId:1
	})
	
	let formdataa = reactive({
	 logoName: '',
	 logoIntroduce: "",
	 logoImage:"",
	 siteId:1
	})
	//点击编辑
	let url=ref('')
	const modify =(row)=>{
		//console.log("品牌编辑",row)
		formdata = row
		imageUrl.value = downloadUrl+row.logoImage
		dialogFormVisible.value= true
	}
	//点击编辑中的确定
	const serve = async ()=>{
		
		let res1 = await UpdateBrandList(formdata)
		dialogFormVisible.value= false
		if(res1 == "更新成功"){
			ElMessage.success({
				message:"修改成功"
			})
		}else{
			ElMessage.error({
				message:"修改失败"
			})
		}
		//console.log("编辑",res1)
	}
	
	//点击删除
	const del= (data)=>{
		dialogVisible1.value= true
		// console.log(data)
		sessionStorage.setItem("logoId",data.logoId)
	}
	//点击删除中的确定
	const define=async ()=>{
		dialogVisible1.value= false
		let da =await DelBrandList({"logoId":Number(sessionStorage.getItem("logoId"))})
		//console.log("删除",da)
		if(da == "删除成功"){
			ElMessage.success({
				message:"删除成功"
			})
		}else{
			ElMessage.error({
				message:"删除失败"
			})
		}
		MakeList()
	}
	//添加中表单验证
	const ruleFormRef = ref(null)
	const rules = reactive({
		logoName: [
		    { required: true, message: '品牌名称不能为空', trigger: 'blur' },
		],
		logoImage: [
		    { required: true, message: '品牌Logo不能为空', trigger: 'blur' },
		],
		logoIntroduce: [
		    { required: true, message: '品牌介绍不能为空', trigger: 'blur' },
		]
	})
	//点击添加
	const add = ()=>{
		imageUrl2.value=''
		
		dialogFormVisible2.value=true
		formdataa = reactive({
		  logoName:'',
		  logoIntroduce:"",
		  logoImage:"",
		  siteId:1
		})
	}
	//添加中的确定
	const sure =async (form,formEl)=>{
		formEl.validate(async (valid)=>{
			if(valid){
				dialogFormVisible2.value=false
				let rep = await InsertBrandList(form)
				if(rep == "添加成功"){
					ElMessage.success({
						message:"添加成功"
					})
				}else{
					ElMessage.error({
						message:"添加失败"
					})
				}
				//console.log("成功",rep)
				//console.log(form)
				MakeList()
			}
		})
	}
	const cancel =()=>{
		dialogFormVisible.value = false
		MakeList()
	}
	onMounted(()=>{
		MakeList()
	})
</script>


<style scoped lang="less">
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.el-input{
				width:200px;
			}
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
			:deep(.el-table .el-table__cell){
				text-align: center !important;
			}
		}
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
	}
</style>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.avatar{
	width: 130px;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
}
</style>